<template>
  <div>
    <div class="shoppingcart-list">
      <label class="checkbox" v-for="(item,index) in cartList" :key="index">
        <dl :class="{'gray':item.product_status == 0}" @click="hadleCheck(item)">
          <checkbox class="weui-check" :value="item.product_sku_id" :disabled="item.product_status == 0"
                    :checked="item.checked"/>
          <div @click.stop="toProductDetails(item.product_id)">
            <dt>
              <span class="Pstate" v-if="item.product_status == 0">{{item.product_status_text}}</span>
              <img
                :src="item.product_cover + '?x-oss-process=image/resize,m_pad,h_400,w_400,color_ffffff/quality,Q_80/format,jpg'">
            </dt>
            <dd>
              <h2>{{item.designer_name}}</h2>
              <h3>{{item.product_name}}</h3>
              <p class="gray">尺码：{{item.size}}</p>
              <p class="red45" v-if="item.change_text">{{item.change_text}}</p>
            </dd>
          </div>
          <span class="del-btn" @click.stop="cartDelProduct(item.cart_id)">
            <i class="iconfont icon-shanchu"></i>
          </span>
          <div class="shoppingcart-price">
            <span class="price-text">{{item.currency_logo}}{{item.show_price}}</span>
            <div class="product-number">
              <button :disabled="item.product_qty == 1 || item.product_status == 0" @click.stop="delQty(item)">
                <i class="iconfont icon-jian"></i>
              </button>
              <input type="text" class="productnum" disabled v-model="item.product_qty">
              <button :disabled="item.product_status == 0" @click.stop="addQty(item)">
                <i class="iconfont icon-tianjia"></i>
              </button>
            </div>
          </div>
        </dl>
      </label>
    </div>
    <div class="posiHeight"></div>
    <div class="cashier-bottom-bar">
      <span class="shoppingcart-bar-left">
        合计：€
        <font class="futuraFont">{{totalselectedprice}}</font>
        <font style="margin-left:10px">(约￥{{totalselectedrmbprice}})</font>
      </span>
      <button @click="settlement">去结算</button>
    </div>
    <placeholder :show.sync="errorPage" :message.sync="errorMsg" :btnText="errorBtnText" @tryAgain="onTap"/>
  </div>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  import placeholder from '@/components/placeholder'
  import {cartAction} from '@/store/funnames'

  export default {
    data() {
      return {
        totalselectedprice: 0,
        totalselectedrmbprice: 0,
        checkedProduct: []
      }
    },
    components: {
      placeholder: placeholder
    },
    computed: {
      // 计算属性的 getter
      ...mapState('cart', ['cartList', 'errorPage', 'errorMsg', 'settleData', 'errorBtnText'])
    },
    mounted() {
      if (!this.$wx.isLogin()) {
        this.$wx.jumper("../login/main");
        this.showEmpty({show: true, msg: '您还没有登录'})
        return
      }
      this.getCarts();
    },
    onLoad() {
      this.$wx.setTitleBarTitle('购物袋');
    },
    methods: {
      ...mapMutations('cart', {
        showEmpty: cartAction.ACTION_SHOWEMPTY
      }),
      ...mapActions('cart', [
        'getCarts',
        'checkSettle'
      ]),
      onTap() {
        console.log(this.errorBtnText,'onTap')
        if (this.errorBtnText == '再试一次') {
          this.getCarts()
        } else {
          wx.switchTab({
            url: '../index/main'
          })
        }
      },
      //增加
      addQty(item) {
        this.addDelQty(item, 1, () => {
          item.product_qty++;
          this.computePrice()
        })
      },
      //减少
      delQty(item) {
        this.addDelQty(item, -1, () => {
          item.product_qty--;
          this.computePrice()
        })
      },
      hadleCheck(item) {
        if (item.product_status == 0) return
        item.checked = !item.checked
        if (item.checked) {
          let productItem = {
            product_id: item.product_id.toString(),
            product_sku_id: item.product_sku_id.toString(),
            product_qty: item.product_qty.toString(),
            cart_id: item.cart_id
          }
          this.checkedProduct.push(productItem)
        } else {
          this.checkedProduct.splice(item, 1)
        }
        this.computePrice()
      },
      //计算价格
      computePrice() {
        let checkedprice = 0,
          checkedrmbprice = 0;
        this.cartList.forEach(function (v) {
          if (v.checked === true) {
            checkedprice += parseFloat(v.show_price * v.product_qty)
            checkedrmbprice += parseFloat(v.rmb_settle_price * v.product_qty)
          }
        })
        this.totalselectedprice = checkedprice
        this.totalselectedrmbprice = checkedrmbprice.toFixed()
      },
      async settlement() {
        if (this.checkedProduct.length <= 0) {
          this.$wx.showShortToast('请选择要结算的商品')
          return false
        }
        await this.checkSettle({isSettlePage: false, checkedProduct: this.checkedProduct})
        if (this.settleData) {
          this.checkedProduct = []
          this.cartList.forEach(function (v) {
            v.checked = false;
          })
          this.$wx.jumper('/pages/cashier/main')
        } else {
          this.$wx.showShortToast(this.errorMsg)
        }
      },
      //删除
      cartDelProduct(cartId) {
        const self = this
        wx.showModal({
          title: '提示',
          content: '确认要删除此商品吗?',
          success(res) {
            self.delete(res, cartId)
          }
        })
      },
      //删除商品
      async delete(res, cartId) {
        if (res.confirm) {
          const data = await this.$fly.post(this.$url.URL_CARTDEL, {
            cart_ids: cartId
          })
          if (data.successCode === 1) {
            this.getCarts()
          }
        }
      },
      //增减数量
      async addDelQty(product, qty, callback) {
        const data = await this.$fly.post(this.$url.URL_CARADDQTY, {
          product_id: product.product_id,
          product_sku_id: product.product_sku_id,
          product_price: product.show_price,
          product_qty: qty
        })
        if (data.successCode === 1) {
          if (callback) {
            callback()
          }
        }
      },
      toProductDetails(productId){
        this.$wx.jumper('/pages/productDetails/main?productId='+ productId)
      }
    },
    created() {

    }
  }
</script>
<style>
  .posiHeight {
    height: 55px;
  }

  .shoppingcart-list dl {
    background: #fff;
    overflow: hidden;
    position: relative;
    margin: 5px;
  }

  .shoppingcart-list dl dt {
    float: left;
    margin-left: 10%;
    position: relative;
  }

  .shoppingcart-list dl dt .Pstate {
    width: 42px;
    height: 42px;
    line-height: 42px;
    margin-top: 16%;
  }

  .shoppingcart-list dl dt img {
    width: 80px;
    height: 80px;
    position: relative;
    top: 16px;
  }

  .shoppingcart-list dl dd {
    margin-left: 6%;
    line-height: 1.2em;
    margin-top: 2%;
    float: left;
    width: 52%;
  }

  .shoppingcart-list dl dd h2 {
    font-family: 'FuturaStd';
    line-height: 1.4em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .shoppingcart-list dl dd h2 .product-bs {
    padding: 1px 2px;
    margin: 0 6px 0 0;
    font-size: 0.7em;
    background: #ffa2a3;
  }

  .shoppingcart-list dl dd h3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .shoppingcart-list dl dd p {
    font-size: 0.8em;
    line-height: 1.2em;
    margin-top: 6px;
  }

  .weui-check {
    position: absolute;
    top: 40px;
    left: 10px;
  }

  .shoppingcart-list dl .del-btn {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .shoppingcart-list dl .del-btn i {
    color: #000;
  }

  .shoppingcart-list dl.gray .price-text {
    color: #999;
  }

  .shoppingcart-list dl.gray p,
  .shoppingcart-list dl.gray dt img {
    opacity: 0.5;
  }

  .shoppingcart-price {
    padding: 0 4% 2%;
    float: left;
    width: 100%;
    position: relative;
    box-sizing: border-box;
  }

  .shoppingcart-price .price-text {
    padding-left: 124px;
    color: #000;
    font-weight: bold;
    margin-top: 4px;
    float: left;
  }

  .product-number {
    border: 1px #dcdcdc solid;
    width: 90px;
    height: 26px;
    float: right;
  }

  .product-number button {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    float: left;
    background: none;
  }

  .product-number button i {
    position: relative;
    top: 2px;
    color: #000;
  }

  .product-number input {
    width: 40px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-left: 1px #dcdcdc solid;
    border-right: 1px #dcdcdc solid;
    float: left;
  }

  .product-number button[disabled] i {
    color: #999;
  }
</style>
